<script lang="ts" setup>
import { watchEffect, defineProps, ref } from "vue";
import * as echarts from "echarts";
const props = defineProps<{
  data: string | number;
  title: string;
}>();
const chartRef = ref();
const getPieValue = (unit = "") => {
  return `${(Number(props.data) * 100).toFixed(2)}${unit}`;
};
const init = () => {
  if (!chartRef.value) {
    return;
  }
  const num = getPieValue();
  const myChart = echarts.init(chartRef.value);
  const option = {
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    series: [
      {
        type: "pie",
        radius: ["80%", "100%"],
        center: ["50%", "50%"],
        startAngle: 220,
        endAngle: 320,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        animation: false,
        data: [
          {
            value: num,
            itemStyle: {
              color: "#009DFF"
            }
          },
          {
            value: 100 - num,
            itemStyle: {
              color: "#0E2E4B"
            },
            selected: false
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
};
watchEffect(() => {
  init();
});
</script>
<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart-pie"></div>
    <div class="label">
      <div class="label-num">{{ getPieValue("%") }}</div>
      <div class="label-text">{{ title }}</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 160px;
  height: 160px;
}
.chart-pie {
  width: 160px;
  height: 160px;
}
.label {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  &-num {
    font-size: 28px;
    line-height: 28px;
    color: #009dff;
    font-family: "TCloudNumber-Regular", "TCloudNumber";
  }
  &-text {
    color: rgba(177, 189, 202, 1);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 3px;
    margin-top: 10px;
  }
}
</style>
